<template>
  <div ref="chartRef" style="width: 100%; height: 400px"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import { useResizeHandler } from "./components/useResizeHandler"; // 修改为你的实际路径

const chartRef = ref(null);
let chartInstance = null;

const initChart = () => {
  if (!chartRef.value) return;
  chartInstance = echarts.init(chartRef.value);
  chartInstance.setOption({
    title: { text: "折线图示例" },
    tooltip: { trigger: "axis" },
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: { type: "value" },
    series: [
      {
        name: "销量",
        type: "line",
        data: [120, 200, 150, 80, 70, 110, 130],
        smooth: true,
      },
    ],
  });
};

// 自动处理 resize
useResizeHandler(() => chartInstance?.resize());

onMounted(() => initChart());
onBeforeUnmount(() => chartInstance?.dispose());
</script>
